<template>
  <div class="content-list">
    <ul class="section-content">
      <li class="content-item" v-for="(item,index) in listOfSongList" :key="index">
        <div class="kuo" @click="goSongListInfo(item)">
          <img class="item-img" :src="item.pic">
          <div class="mask">
            <svg class="icon">
              <use xlink:href="#icon-bofang"></use>
            </svg>
          </div>
        </div>
        <p class="item-name">{{item.name||item.title}}</p>
      </li>
    </ul>
  </div>

</template>

<script>
export default {
name: "SongListOfContent",
  props:['listOfSongList'],
  methods:{
    goSongListInfo(item){
      this.$store.commit('SONGLISTINFO',item)
     this.$router.push(`/songListInfo/${item.id}`)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/css/content-list.scss';
</style>

